<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景大图制作技巧2</title>
    <style>
        .box {
            width: 50px;
            background-color: bisque;
            margin: 100px auto;
            padding: 0 4px;
        }

        .box a {
            display: block;
            width: 50px;
            height: 50px;
            /* padding-top: 30px; */
            /* line-height: 50px; */
            /* float: left; */
            font-size: 13px;
            text-align: center;
            text-decoration: none;
            border-bottom: 1px solid #c95656;
        }
        .box #a4{
            border-bottom: none;
        }

        .box #a1 p,
        .box #a2 p,
        .box #a3 p,
        .box #a4 p {
            margin: 0 auto;
            padding: 0;
            margin-top: 10px;
            width: 30px;
            height: 30px;
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
        }

        .box #a1 p {
            background-image: url(../image/course.png);
            margin-top: 0;
        }

        .box #a2 p {
            background-image: url(../image/child.png);
        }
        .box #a3 p {
            background-image: url(../image/delete.png);
        }
        .box #a4 p {
            background-image: url(../image/prompt.png);
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="" id="a1">
            <p></p>
            <span>进入</span>
        </a>
        <a href="" id="a2">
            <p></p>
            <span>卡卡</span>
        </a>
        <a href="" id="a3">
            <p></p>
            <span>删除</span>
        </a>
        <a href="" id="a4">
            <p></p>
            <span>信息</span>
        </a>
    </div>
</body>

</html>